<template>
  <div>
    <div class="top">
      <div class="time">监测时间：
        <DatePicker format="yyyy/MM/dd HH:mm:ss" type="daterange" show-week-numbers
                    :value="[bloc.form.createBegin,bloc.form.createEnd]"
                    @on-change="dateChange" split-panels
                    :options="options"
                    style="width: 300px;margin-right:5px"></DatePicker>
      </div>
    </div>
    <ul class="list" v-for="(item,index) in pillow" :key="index">
      <li>
        <div class="nav">
          <div class="left">
            <Icon type="ios-bookmark" style="vertical-align:middle"/>
            <i>{{formatDate(new Date(item.startTime),'yyyy-MM-dd hh:mm:ss')}}</i>
          </div>
          <div class="right">
            枕头编号：{{item.deviceSn}}
          </div>
        </div>
        <div class="charts">
          <div class="left">
            <span><img src="@/asset/images/rate.png" alt="">心率</span>
            <ChartLine style="height:360px;margin:0px;width:100%;border:none"
                       :value="JSON.parse(item.hearts)"
                       :time="time"
                       :max="rateMax"
                       :interval="rateInterval"/>
          </div>
          <div class="right"><span><img src="@/asset/images/fei.png" alt="">呼吸率</span>
            <ChartLine style="height:360px;margin:0px;width:100%;border:none" :value="hearts" :time="time"
                       :max="rateMax"
                       :interval="rateInterval"/>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {ChartLine} from '@/component/charts';
  import {formatDate} from '@/base/util/Dates'
  import {DetailBloc} from '@/view/member/bloc/MemberDetailBloc';

  @Component({
    components: {ChartLine}
  })
  export default class extends Vue {
    @Prop(Object) readonly tableData: object | undefined
    // @Prop([]) readonly pillow: [] | undefined
    @Prop({type: Array})
    readonly pillow!: Array<Object> | undefined;
    formatDate = formatDate
    options: any = {}
    rateMax = 150
    rateInterval = 30
    hearts = [0, 30, 60, 90, 120, 150]
    time = []
    bloc: DetailBloc = new DetailBloc()

    dateChange(date) {
      if (date[0] === '' || date[1] === '') {
        this.bloc.form.createBegin = ''
        this.bloc.form.createEnd = ''
        return false
      }
      this.bloc.form.createBegin = date[0]
      this.bloc.form.createEnd = date[1]
      this.$emit('dateChange', date[0], date[1])
    }

    mounted() {
      // console.log(this.pillow)
    }
  };
</script>
<style lang="less" scoped>
  .top {
    width: 100%;
    height: 80px;

    .time {
      margin-top: 20px;
      float: right;
      margin-right: 210px;
    }
  }

  .list {
    padding: 30px 20px;

    li {
      width: 100%;

      .nav {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
        box-sizing: border-box;

        .left {
          font-size: 20px;
        }

        .right {
          margin-right: 50px;
        }
      }

      .charts {
        width: 100%;
        display: flex;
        justify-content: space-between;

        & > .left, & > .right {
          width: 45%;

          span {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin: 30px 0;

            img {
              vertical-align: middle
            }
          }
        }
      }
    }
  }
</style>
